<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
</head>
<body>
 
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div><img src="https://cole1998.oss-cn-hangzhou.aliyuncs.com/image/1665908395904.jpg" alt="" style="height:100%;width:100%"></div>
    <div><img src="https://cole1998.oss-cn-hangzhou.aliyuncs.com/image/1665908568737.jpg" alt="" style="height:100%;width:100%"></div>
    <div><img src="https://cole1998.oss-cn-hangzhou.aliyuncs.com/image/1665908462939.jpg" alt="" style="height:100%;width:100%"></div>
    <div><img src="https://cole1998.oss-cn-hangzhou.aliyuncs.com/image/1665908495723.jpg" alt="" style="height:100%;width:100%"></div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
 

<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,height:'400px'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    ,anim: 'fade' //切换动画方式
  });
});
</script>
</body>
</html>